import type { EChartsOption } from 'echarts';
import { useEffect, useRef } from 'react';
import * as Echarts from 'echarts';

interface EchartsContainerProps {
    option: any
    height?: number | string
}

const EchartsContainer: React.FC<EchartsContainerProps> = ({
    option,
    height
}) => {
    const echartsContainer = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const myChart = Echarts.init(echartsContainer.current);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }, [])

    return <div ref={echartsContainer}
        style={{ height, width: '100%' }}

    ></div>
}

export default EchartsContainer